<template>
    <div class="qilin-home">
         <Layout>
            <Header class="qilin-home-header">
                <Menu mode="horizontal" theme="dark" class="qilin-home-header-menu"
                    :active-name="$route.path === '/user' ? '1' : '2' "
                >
                    <div class="layout-logo">厚礼蟹后台</div>
                    <div class="layout-nav">
                        <MenuItem name="1" to="/user">
                            <Icon type="ios-navigate"></Icon>
                            用户管理
                        </MenuItem>
                        <MenuItem name="2" to="/crab">
                            <Icon type="ios-keypad"></Icon>
                            螃蟹管理
                        </MenuItem>
                    </div>
                </Menu>
                <Dropdown class="qilin-home-header-role" @on-click="clickDropDown">
                    <a href="javascript:void(0)">
                        系统管理员
                        <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem name="exit">退出登录</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </Header>
            <Content :style="{padding: '20px'}">
                <router-view></router-view>
            </Content>
        </Layout>
    </div>
</template>
<script>
import Qilin from "qilin-utils";
import {uploadImageUrl,uploadXlsxUrl} from "@/setting.js";
export default {
    provide(){
        return {
            uploadImageUrl,
            uploadXlsxUrl
        }
    },
    data(){
        return {

        }
    },
    methods:{
        // 点击下拉菜单选项事件监听
        clickDropDown(type){
            switch(type){
                case "exit":
                    Qilin.Storage.removeKeyLocalStorage("token");
                    this.$router.push("/login");
                break;
            };
        }
    }
}
</script>
<style lang="scss" scoped>
.qilin-home{
    width:100%;
    height:100%;
    >.ivu-layout{
        height:100%;
        >.qilin-home-header{
            padding:0 20px;
            display: flex;
            >.qilin-home-header-menu{
                height:100%;
                line-height:64px;
                overflow: hidden;
                flex:1;
                >.layout-logo{
                    width: 100px;
                    height: 30px;
                    background: #5b6270;
                    border-radius: 3px;
                    float: left;
                    position: relative;
                    top: 17px;
                    left: 20px;
                    color:#fff;
                    line-height:30px;
                    text-align:center;
                    font-weight:bolder;
                    letter-spacing: 2px;
                }
                >.layout-nav{
                    width: 300px;
                    margin: 0 auto;
                    margin-right: 20px;
                }
            }
            >.qilin-home-header-role{
                width:auto;
                a{
                    color:#fff;
                }
            }
        }
        >.ivu-layout-content{
            flex:1;
        }
    }
}
</style>